<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first_servlet</title>
    <style>
        .one {
            font-size: 50px;
        }
    </style>


</head>
<body>
    <div class="one"></div>
    <button id="doGet">get</button>
    <button id="doPost">post</button>
    <button id="doPut">put</button>
    <button id="doDel">delete</button>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        let doGetBtn = document.querySelector('#doGet');
        doGetBtn.onclick = function (){
            $.ajax({
                type: 'get',
                url:'hello_servlet',
                success: function (body){
                    // console.log(body);
                    let div = document.querySelector('.one');
                    div.innerHTML = body;
                }
            })
        }

        let doPostBtn = document.querySelector('#doPost');
        doPostBtn.onclick = function (){
            $.ajax({
                type: 'post',
                url:'hello_servlet',
                success: function (body){
                    // console.log(body);
                    let div = document.querySelector('.one');
                    div.innerHTML = body;
                }
            })
        }

        let doPutBtn = document.querySelector('#doPut');
        doPutBtn.onclick = function (){
            $.ajax({
                type: 'put',
                url:'hello_servlet',
                success: function (body){
                    // console.log(body);
                    let div = document.querySelector('.one');
                    div.innerHTML = body;
                }
            })
        }

        let doDelBtn = document.querySelector('#doDel');
        doDelBtn.onclick = function (){
            $.ajax({
                type: 'delete',
                url:'hello_servlet',
                success: function (body){
                    // console.log(body);
                    let div = document.querySelector('.one');
                    div.innerHTML = body;
                }
            })
        }
    
    </script>
</body>
</html>